<template>
 <div class="app-container">


    <el-table :key="tableKey" v-loading="listLoading" :data="list" :show-overflow-tooltip='true' size="mini" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="登录账号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.login_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="登录ip" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.login_ip}}
        </template>
          </el-table-column>
        <el-table-column label="浏览器" class-name="status-col">
          <template slot-scope="{row}">
            {{ row.browser}}
          </template>

      </el-table-column>
      <el-table-column label="操作系统" class-name="status-col" width="900">
        <template slot-scope="{row}">
          {{ row.os}}
        </template>
          </el-table-column>
      <el-table-column label="登录时间" class-name="status-col" width="180">
        <template slot-scope="{row}">
          {{ row.create_time|formatDate}}
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>

<script>

import {
  getLoginLogList
} from '@/api/system'
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'BalanceTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    data() {
      return {
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20
        },

      }
    },
    created() {
      this.listLoading=false
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        getLoginLogList(this.listQuery).then(response => {
          this.list = response.data.data
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.0 * 1000)
        })
      }
    }
  }
</script>

<style>
</style>
